<template>
  <view>
    <!-- 模块2：已选商品列表 -->
    <view class="goods-list">
      <view class="goods-title">已选商品</view>
      <view class="cart-item" v-for="item in selectList" :key="item.goods_id">
        <view class="cart-count"> x{{ item.goods_count }} </view>
        <navigator
          class="goods-item"
          hover-class="none"
          :url="`/packageB/productdetails/vegetabledetails?goods_id=${item.goods_id}`"
        >
          <!-- 商品图片 -->
          <image
            class="goods-image"
            :src="item.goods_small_logo"
            mode="aspectFit"
          />
          <!-- 商品信息 -->
          <view class="goods-info">
            <view class="goods-name">{{ item.goods_name }}</view>
            <view class="goods-price">{{ item.goods_price }}</view>
          </view>
        </navigator>
      </view>
    </view>
    <view class="address" v-if="addressshow">
      <view class="address_a">
        <view class="address_a1">
          <view class="address_a2">收件地址</view>
          <view class="address_a3">编辑地址</view>
        </view>
        <view class="address_a4">陈小姐 13888888898</view>
        <view class="address_a4">珞珈创意城</view>
      </view>
      <view class="address_b">
        <view class="address_b1">运费</view>
        <view class="address_b2">￥6.00</view>
      </view>
    </view>
    <view class="paytypebox">
      <view class="paytype">
        <view class="paytype_1">支付方式</view>
        <view class="paytype_2">
          <image src="../../static/wechat.png" mode="" class="img"></image>
        </view>
      </view>
    </view>

    <!-- 模块3：底部操作栏 -->
    <view class="bottom-bar">
      <view class="bottom-bar-fixed">
        <view class="bottom-bar-fixed1"
          ><!-- 合计 -->
          <view class="coupon">优惠券</view>
          <view class="total">
            <text class="total-name">合计：</text>
            <text class="total-price">{{ selectListPrice + "元" }}</text>
          </view>
        </view>
        <view class="account" @click="goPay"
          >去支付({{ selectListCount + "件" }})
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      addressshow: true,
      address: {},
    };
  },
  computed: {
    ...mapGetters(["selectList", "selectListCount", "selectListPrice"]),
    detailAddress() {
      const { provinceName, cityName, countyName, detailInfo } = this.address;
      return [provinceName, cityName, countyName, detailInfo].join(" ");
    },
  },
  methods: {
    async getAddress() {
      // #ifdef H5
      alert("暂不支持此操作");
      // #endif
      const [error, res] = await uni.chooseAddress();
      console.log(res);
      this.address = res;
    },
    // 支付
    goPay() {
      // const data = {
      // 	order_price: this.selectListPrice,
      // 	consignee_addr: this.detailAddress,
      // 	goods: this.selectList.map(item => {
      // 		return {
      // 			goods_id: item.goods_id,
      // 			goods_number: item.goods_count,
      // 			goods_price: item.goods_price
      // 		}
      // 	})
      // }
      // // 创建订单 获取订单编号
      // const res = await uni.$u.http.post('/my/orders/create', data)
      // // console.log(res);
      // const {
      // 	order_number
      // } = res.data.message
      // const res2 = await uni.$u.http.post('/my/orders/req_unifiedorder', {
      // 	order_number
      // })
      // const {
      // 	pay
      // } = res2.data.message
      // const [error, res3] = await uni.requestPayment(pay)
      uni.navigateTo({
        url: "/packageB/pay/pay",
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #fff;
}

.address {
  padding: 0rpx 40rpx;
  margin-bottom: 40rpx;
  .address_a {
    padding: 20rpx 10rpx;
    border-top: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
    margin-bottom: 20rpx;
    .address_a1 {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10rpx;
    }
    .address_a2 {
      font-size: 30rpx;
      font-weight: 600;
      color: #4a4543;
    }
    .address_a3 {
      font-size: 30rpx;
      font-weight: 600;
      color: #bbbbbb;
    }
    .address_a4 {
      font-size: 24rpx;
      color: #adadad;
      margin-bottom: 4rpx;
    }
  }
  .address_b {
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    color: #adadad;
    margin-bottom: 4rpx;
  }
}

// 模块2：已选商品列表
.goods-list {
  background-color: #fff;
  margin: 20rpx;
  padding: 20rpx;
  border-radius: 10rpx;

  .goods-title {
    line-height: 40rpx;
    font-size: 26rpx;
  }

  .cart-item {
    position: relative;

    .cart-count {
      position: absolute;
      right: 20rpx;
      bottom: 30rpx;
    }

    // 选中最后一项
    &:last-child {
      .goods-item {
        border: none;
      }
    }
  }
}

// 全局公共样式
.goods-list {
  .goods-item {
    display: flex;
    border-bottom: 1rpx solid #ddd;
    padding: 25rpx;

    .goods-image {
      width: 190rpx;
      height: 190rpx;
      border-radius: 20rpx;
    }

    .goods-info {
      flex: 1;
      font-size: 24rpx;
      // 垂直方向两端对齐
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 30rpx 20rpx;

      .goods-name {
        // 多行超出隐藏
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }

      .goods-price {
        color: #eea427;

        // 前面的价格符号
        &::before {
          content: "￥";
          font-size: 80%;
          margin-right: 5rpx;
        }
      }
    }
  }
}

.paytypebox {
  padding: 0rpx 20rpx 100rpx 20rpx;

  .paytype {
    background-color: #fff;
    padding: 30rpx;
    border-radius: 20rpx;

    .paytype_1 {
      font-size: 30rpx;
      color: #333;
      margin-bottom: 60rpx;
    }

    .paytype_2 {
      text-align: center;

      .img {
        width: 140rpx;
        height: 90rpx;
      }
    }
  }
}

// 底部操作栏
.bottom-bar {
  // 占位用
  height: 120rpx;

  // 定位的操作栏
  .bottom-bar-fixed {
    // height: 100rpx;
    width: 100%;
    position: fixed;
    z-index: 99;
    left: 0;
    bottom: 0;
    border-top: 1px solid #eee;

    .bottom-bar-fixed1 {
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 20rpx;
    }

    .select {
      .select-radio {
        font-size: 24rpx;
        color: #999;
      }
    }

    .coupon {
      flex: 1;
    }

    .total {
      // flex: 1;
      display: flex;
      align-items: center;

      .total-name {
        font-size: 24rpx;
      }

      .total-price {
        color: #eea427;
      }
    }

    .account {
      background-color: #eea427;
      color: #fff;
      font-size: 22rpx;
      width: 80%;
      height: 70rpx;
      border-radius: 35rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 20rpx auto 30rpx;
    }
  }
}
</style>